<template>
  <div>
    <el-card class="box-card">
      <h3>自营车辆统计信息</h3>
      <h5>统计时间:{{ selflist.time | data }}</h5>
      <h3 class="h3">总成交额：{{ selflist.estimated }}万元</h3>
      <div id="myChart" :style="{ width: '100%', height: '300px' }"></div>
      <!-- <MyEcharts :selflist="selflist"></MyEcharts> -->

      <h3>个人车辆统计信息</h3>
      <h5>统计时间:{{ time | data }}</h5>
      <div id="userChart" :style="{ width: '400px', height: '300px' }"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getfirstself, getfirstpersonal, getself, getpersonal } from '@/api/user'
// import MyEcharts from './component/echarts.vue'
export default {
  name: 'DataManagement',
  data() {
    return {
      selflist: {},
      time: ''
    }
  },
  // components: { MyEcharts },
  created() {
    this.initList()
    // this.getData()
    this.drawLine()
  },
  mounted() {},
  methods: {
    // 获取
    async getData() {
      const res = await getpersonal()
      console.log(res)
      // geren
      const data = await getself()
      console.log(data)
    },
    initList() {
      this.myInterval = window.setInterval(() => {
        setTimeout(() => {
          this.drawLine() //调用接口的方法
        }, 1)
      }, 2000)
    },
    async drawLine() {
      // 自营初始
      const res = await getfirstself()
      if (res.data.data) {
        const data = res.data.data
        let list = [data.total_sales, data.car_count, data.published_count, data.reserve_count, data.put_in_count]
        this.selflist = {
          estimated: data.estimated_turnover,
          time: data.statistical_time
        }
        this.myChart(list)
      }
      // 个人初始
      const user = await getfirstpersonal()
      console.log(user)
      if(user.data.statu == 403){
        this.$message.warning(user.data.msg)
        this.$router.push('/')
      }
      if (user.data.data) {
        const data = user.data.data
        let list = [data.published, data.sell]
        this.userChart(list)
        this.time = data.statistical_time
      }
    },
    myChart(list) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        // 全局调色盘。
        tooltip: {},
        xAxis: {
          data: ['总销售量', '车辆总数', '已发布数量', '已预约数量', '已入库数量']
        },
        yAxis: {
          // type: 'value',
          name: '单位：辆'
        },
        series: [
          {
            type: 'bar',
            data: list,
            itemStyle: {
              color: function (params) {
                var colorlist = ['#DA251D', '#E67716', '#FBC300', '#11440f', '#32585a', '#00ff77']
                return colorlist[params.dataIndex]
              }
            },
            label: {
              normal: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold',
                color: '#000',
                position: 'top'
              }
            }
          }
        ]
      })
      window.onresize = function () {
        myChart.resize()
      }
    },

    userChart(list) {
      // 基于准备好的dom，初始化echarts实例
      let userChart = echarts.init(document.getElementById('userChart'))
      // 绘制图表
      userChart.setOption({
        // 全局调色盘。
        tooltip: {},
        xAxis: {
          data: ['已发布数量', '已卖出数量']
        },
        yAxis: {
          // type: 'value',
          name: '单位：辆'
        },
        series: [
          {
            type: 'bar',
            data: list,
            itemStyle: {
              color: function (params) {
                var colorlist = ['#DA251D', '#E67716']
                return colorlist[params.dataIndex]
              }
            },
            label: {
              normal: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold',
                color: '#000',
                position: 'top'
              }
            }
          }
        ]
      })
      window.onresize = function () {
        userChart.resize()
      }
    }
  },
  destroyed() {
    clearInterval(this.myInterval)
  },
  filters: {
    data: value => {
      const year = new Date(value).getFullYear()
      let month = new Date(value).getMonth() + 1
      let date = new Date(value).getDate()
      let hh = new Date(value).getHours() // h
      hh = hh < 10 ? '0' + hh : hh
      let mm = new Date(value).getMinutes()
      mm = mm < 10 ? '0' + mm : mm
      let ss = new Date(value).getSeconds()
      ss = ss < 10 ? '0' + ss : ss
      return year + '年' + month + '月' + date + '日' + hh + ':' + mm + ':' + ss
    }
  }
}
</script>
<style lang="less" scoped>
#userChart {
  margin-left: 50px;
}
.h3{
  color: red;
  text-align: center;
}
</style>
